<template>
  <div id="community-detail">
    <div class="container">

      <div class="left">
        <CommunityLeftComponent :club="clubDetail" />
      </div>

      <div class="right">

        <el-container class="bottom">

          <el-header class="community-header">
            <CommunityTopComponent :currentView="currentView" :currentTap="tapNum" @update:view="updateView" />
          </el-header>

          <el-main>
            <CommunityBottomComponent v-if="currentView === 'community'" :clubId="clubId"
              @view-detail="handleViewDetail" @edit-post="handleEditPost" />

            <SomePostComponent v-if="currentView === 'post'" :clubId="clubDetail?.clubId" :countLimit="imageCountLimit"
              @post-created="handlePostCreated" />

            <PostDetailComponent v-if="currentView === 'detail'" :postId="selectedPostId"
              @post-deleted="handlePostDeleted" @edit-post="handleEditPost" @go-back="handleGoBack" />

            <PostEditComponent v-if="currentView === 'edit'" :postId="selectedPostId" :countLimit="imageCountLimit"
              @post-updated="handlePostUpdated" @cancel-edit="handleCancelEdit" />
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import CommunityLeftComponent from './CommunityLeftComponent.vue';
import CommunityTopComponent from './CommunityTopComponent.vue';
import CommunityBottomComponent from './CommunityBottomComponent.vue';
import SomePostComponent from './SomePostComponent.vue';
import PostDetailComponent from './PostDetailComponent.vue';
import PostEditComponent from './PostEditComponent.vue';

export default {
  name: 'CommunityDetail',
  components: {
    CommunityLeftComponent,
    CommunityTopComponent,
    CommunityBottomComponent,
    SomePostComponent,
    PostDetailComponent,
    PostEditComponent,
  },
  data() {
    return {
      clubDetail: null,
      currentView: 'community',
      clubId: null,
      selectedPostId: null,
      tapNum:"0",
      imageCountLimit:6,
    };
  },
  created() {
    this.clubId = this.$route.query.clubId;
    console.log("Club ID:", this.clubId);
    this.fetchClubDetails();
  },
  methods: {
    updateView(view) {
      this.currentView = view;
    },
    async fetchClubDetails() {
      try {
        const response = await axios.post('/club/clubInfo', null, {
          params: { clubId: this.clubId },
        });
        if (response.data.code === 0) {
          this.clubDetail = response.data.data;
        } else {
          console.error('Failed to fetch club details:', response.data.message);
        }
      } catch (error) {
        console.error('Error fetching club details:', error);
      }
    },
    handleViewDetail(postId) {
      this.selectedPostId = postId;
      this.currentView = 'detail';
    },
    handleEditPost(postId) {
      this.selectedPostId = postId;
      this.currentView = 'edit';
    },
    handlePostUpdated() {
      this.currentView = 'community';
      this.fetchClubDetails();
    },
    handleCancelEdit() {
      this.currentView = 'community';
    },
    handlePostDeleted() {
      this.currentView = 'community';
      this.fetchClubDetails();
    },
    handlePostCreated() {
      this.currentView = 'community';
      this.tapNum="0"
      this.fetchClubDetails();
    },
    handleGoBack() {
      this.currentView = 'community';
    }
  },
};
</script>

<style scoped>
#community-detail {
  background-color: #FFE7C7;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.container {
  display: flex;
  height: calc(100vh - 30px);
  gap: 15px; /* 增加了容器之间的间隔 */
  max-width: 1400px;
  margin: 0 auto;
}
.left {
  flex: 1;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.right {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px; /* 增加了上下容器之间的间隔 */
}

.top {
  flex: 1;
  /* height: 50vh; */
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: auto;
}


.community-header {
  position: relative;
}

.bottom {
  flex: 3;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: auto;
}

@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    height: auto;
    gap: 15px; /* 在小屏幕上稍微减小间隔 */
  }

  .left, .right {
    width: 100%;
  }

  .left {
    height: 35vh;
  }

  .top {
    height: 18vh;
  }

  .bottom {
    height: 35vh;
  }

  .right {
    gap: 15px; /* 在小屏幕上稍微减小上下容器之间的间隔 */
  }
}
</style>
